<template>
    <div>
        <div id="my_lne"></div>
    </div>
</template>

<script lang="ts">
import { defineComponent, onMounted } from 'vue'
import * as echarts from 'echarts';
export default defineComponent({
    setup() {
        const initCharts = () => {
            // 基于准备好的dom，初始化echarts实例
            //--- @ts-ignore   忽略ts检查  
            var myChart = echarts.init(document.getElementById('my_lne') as HTMLElement);
            // 绘制图表
            myChart.setOption({
                //控制线的颜色 他是有默认值的
                color: ['#8898dd', '#ddade8', '#fad7c8'],
                title: { //标题
                    text: '诊所收入趋势'
                },
                tooltip: {//提示框
                    trigger: 'axis',
                    axisPointer: {//指示器的配置
                        type: 'cross', //十字准星指示器
                        label: {
                            backgroundColor: ''
                        }
                    }
                },
                legend: { //图例
                    data: ['近7天', '近30天', '近一年月均']
                },
                toolbox: {//工具箱
                    feature: {
                        saveAsImage: {},//保存图片
                        restore: {},//还原
                        dataView: {},//数据视图 显示图标数据
                    }
                },
                grid: {
                    left: '3%', //内边距
                    right: '4%',
                    bottom: '3%',
                    containLabel: true //刻度在里
                },
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,//两边留白
                        // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                    }
                ],
                yAxis: [
                    {
                        type: 'value' //数值轴 省略
                    }
                ],
                series: [
                    {
                        name: '近7天', //系列的名称
                        type: 'line',//图类型 折线图
                        stack: 'Total',//数据堆叠
                        smooth: true,  //线是否平滑
                        lineStyle: { //线样式
                            width: 0
                        },
                        showSymbol: true,//控制点要不要hover时候显示
                        areaStyle: {//区域填充样式
                            opacity: 0.8,//透明度
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {//渐变
                                    offset: 0,
                                    color: '#8898dd'
                                },
                                {
                                    offset: 1,
                                    color: '#8aa6f1'
                                }
                            ])
                        },
                        emphasis: { //折线图的高亮状态
                            focus: ''
                        },
                        data: [10400, 15002, 1001, 26004, 9000, 3400, 2500]
                    },
                    {
                        name: '近30天',
                        type: 'line',
                        stack: 'Total',
                        smooth: true,
                        lineStyle: {
                            width: 0
                        },
                        showSymbol: false,
                        areaStyle: {
                            opacity: 0.8,
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 0,
                                    color: '#da95c7'
                                },
                                {
                                    offset: 1,
                                    color: '#fad7c8'
                                }
                            ])
                        },
                        emphasis: {
                            focus: ''
                        },
                        data: [1200, 20802, 1101, 23004, 200, 30000, 30010]
                    },
                    {
                        name: '近一年月均',
                        type: 'line',
                        stack: 'Total',
                        smooth: true,
                        lineStyle: {
                            width: 0
                        },
                        showSymbol: false,
                        areaStyle: {
                            opacity: 0.8,
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 0,
                                    color: '#ddade8'
                                },
                                {
                                    offset: 1,
                                    color: '#9cdfde'
                                }
                            ])
                        },
                        emphasis: {
                            focus: ''
                        },
                        data: [3200, 13002, 20801, 3304, 19000, 1000, 6770]
                    },
                ]
            });
        }
        //首屏
        onMounted(() => {
            initCharts()
        })
        return {}
    }
})
</script>

<style scoped>
#my_lne {
    width: 890px;
    height: 400px;
    border: 1px solid #ebe9e9;
    background-color: #fdfdfd;
    border-radius: 8px;
    position: relative;
    top: 200px;
    left: 15px;
}
</style>